import React from 'react';
import { FirstHeaderC, SecondHeaderC } from '../../comps';
import { Row, Col, Button } from 'antd';
import Color from '../../css/colors';
import ReactEcharts from 'echarts-for-react';
function isValidNumber(num) {
  return num != null && isFinite(num);
}
class AreaChartsCDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  showEcharts = () => {
    const colors = Color.echart;
    const option = {
      tooltip: {
        // trigger:item,
        // position: 'insideTopLeft',
        formatter: (params) => {
          console.warn(params);
          var arr = ['产品名称:' + params.name + '<br/>', '' + '<br/>', '$' + params.value];
          return arr.join('');
        },
      },
      series: [
        {
          type: 'treemap',
          // width:'60%',
          // height:'100%',
          show: true,
          color: colors,

          label: {
            show: true,
            position: 'insideTopLeft',
            formatter: (params) => {
              console.warn(params);
              var arr = ['产品名称:' + params.name, '', '$' + params.value];
              return arr.join('\n');
            },
          },
          upperLabel: {
            show: true,
            // height:10
          },

          levels: [
            {
              //钻入矩形树图的顶层
              show: true,
              itemStyle: {
                normal: {
                  // borderColor: 'yellow',
                  // gapWidth: 1,
                },
              },
            },
            {
              itemStyle: {
                normal: {
                  borderColor: 'red',
                  gapWidth: 2,
                },
              },
            },
            {
              itemStyle: {
                normal: {
                  gapWidth: 2,
                  borderWidth: 1,
                  borderColor: 'blue',
                },
              },
            },
            {
              itemStyle: {
                normal: {
                  gapWidth: 1,
                  borderWidth: 1,
                  borderColor: 'yellow',
                },
              },
            },
          ],
          data: [
            {
              value: 10,
              name: '股票',
              children: [
                {
                  value: 1380,
                  name: '平安大华-股票',
                },
                {
                  value: 2140,
                  name: '一号产品-股票',
                },
                {
                  value: 2140,
                  name: '二号产品-股票',
                },
                {
                  name: '三号产品-股票',
                  value: 3214,
                },
              ],
            },
            {
              value: 10,
              name: '债券',
              children: [
                {
                  value: 1660,
                  name: '债券一号',
                  children: [
                    {
                      value: 1660,
                      name: '债券二号',
                    },
                    {
                      name: '债券二号-1',
                      value: 415,
                    },
                    {
                      name: '债券二号-2',
                      value: 652,
                    },
                  ],
                },
                {
                  name: '债券一号-1',
                  value: 415,
                },
                {
                  name: '债券一号-2',
                  value: 652,
                },
              ],
            },
            {
              value: 20,
              name: '基金',
              children: [
                {
                  name: '基金-1',
                  value: 17090,
                },
                {
                  name: '基金-2',
                  value: 9967,
                },
                {
                  name: '基金-3',
                  value: 91409,
                },
                {
                  name: '基金-4',
                  value: 109,
                },
              ],
            },
          ],
        },
      ],
    };

    return (
      <div>
        <ReactEcharts option={option} />
      </div>
    );
  };

  render() {
    return (
      <div>
        <FirstHeaderC title='柱形树图' />
        {this.showEcharts()}
      </div>
    );
  }
}

export default AreaChartsCDemo;
